import './App.css';
import { BrowserRouter, Route, Routes } from "react-router-dom";
import { useState, useEffect } from 'react';
import Outer from './components/outer';
import { routes } from "./routes";
import { Suspense } from 'react';

function App() {
  const [width, setWidth] = useState(window.innerWidth);
  const [isLogin, setIsLogin] = useState(false);
  const breakpoint = 1700;

  const loginAction = {
    type: "IS_LOGIN",
    payload: isLogin,
    action: setIsLogin
  }

  useEffect(() => {
    const handleWindowReszie = () => setWidth(window.innerWidth);
    window.addEventListener("resize", handleWindowReszie);
    return () => window.removeEventListener("resize", handleWindowReszie);
  }, [])

  return (
    <BrowserRouter>
      <Suspense fallback={<div>Loading...</div>}>
        <Routes>
          {Object.entries(routes).map(([path, Component]) => (
            <Route
              key={path}
              path={path}
              element={
                <Suspense fallback={<div>Loading route</div>}>
                  <Component diff={width < breakpoint ? 1 : 0} loginAction={loginAction} />
                </Suspense>
              }
            />
          ))}
        </Routes>
        <Outer />
      </Suspense>
    </BrowserRouter>
  );
}

export default App;
